<template>
  <!-- 同城拓客 -->
  <div class="tctk">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="tableQuery" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search">搜索</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset">重置</my-button>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="add-del">
          <my-button type="add" bgc="#E4ECFF" fontColor="#649AF9" @click="handleClickAdd"
            >添加</my-button
          >
          <my-button
            type="del"
            bgc="#fff" border="#DCDCDF" fontColor="#88898E"
            @click="handleClickDel"
            >删除</my-button
          >
          <my-button type="set" bgc="#387CF7" @click="handleClickSet"
            >账号设置</my-button
          >
        </div>
        <div class="list-refresh">
          <my-dropdown-list
            :list="tableColumn"
            @change="changeTableColumn"
          ></my-dropdown-list>
          <div class="iconfont icon" @click="refreshdata">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table
          v-if="tableHeight"
          border
          :data="dataSource"
          :height="tableHeight"
          row-class-name="row-class-name"
          header-row-class-name="header-row-class-name"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="80"> </el-table-column>
          <el-table-column
            v-if="tableColumn.videotype.show"
            prop="videotype"
            label="类型"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="tableColumn.title_new.show"
            prop="title_new"
            label="标题"
            min-width="250"
          >
            <template slot-scope="scope">
              <el-tooltip
                effect="light"
                :content="scope.row.tags"
                placement="top-start"
              >
                <div style="cursor: default">{{ scope.row.title_new }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.videonum.show"
            prop="videonum"
            label="视频数"
            width="150"
          >
            <template slot-scope="scope">
              <el-tooltip
                v-if="getVideonum(scope.row)"
                effect="light"
                content="点击查看详情"
                placement="top-start"
              >
                <div class="tag" @click="handleClickVideonum(scope.row)">
                  {{ scope.row.videonum }}
                </div>
              </el-tooltip>
              <div v-else class="tag">{{ scope.row.video_new }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.status_new.show"
            prop="status_new"
            label="状态"
            width="100"
          >
            <template slot-scope="scope">
              <div
                v-if="scope.row.status_new == '已生效'"
                style="color: #0cb3b3;cursor: pointer;"
              >
                {{ scope.row.status_new }}
              </div>

              <el-tooltip v-if="scope.row.status_new == '未通过'" effect="light" :content="scope.row.auditnote" placement="top-start">
                <my-button  bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385"
                  @click="editRow(scope.row)">{{ scope.row.status_new }}</my-button>
              </el-tooltip>

              <!-- <div
                v-if="scope.row.status_new == '未通过'"
                 @click="editRow(scope.row)"
                style="color: #ee0100;cursor: pointer;"
              >
                {{ scope.row.status_new }}
              </div> -->

              <div
                v-if="scope.row.status_new == '待审核'"
                style="color: #fe7040;cursor: pointer;"
              >
                {{ scope.row.status_new }}
              </div>
              <div
                v-if="scope.row.status_new == '不宜公开'"
                style="color: #d4d4d4;cursor: pointer;"
                fontColor="#828282"
              >
                {{ scope.row.status_new }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.authnum.show"
            prop="authnum"
            label="拓客数"
            width="150"
          >
            <template slot-scope="scope">
              <el-popover
                v-if="!scope.row.authnum"
                placement="top-start"
                title="提示"
                width="200"
                trigger="hover"
                content="还没有粉丝扫描该拓客码!"
              >
                <div slot="reference" style="cursor: pointer">
                  {{ scope.row.authnum }}
                </div>
              </el-popover>
              <el-tooltip
                v-if="scope.row.authnum"
                effect="light"
                content="点击查看详情"
                placement="top-start"
              >
                <div
                  style="cursor: pointer"
                  @click="handleClickAuthnum(scope.row)"
                >
                  {{ scope.row.authnum }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-if="tableColumn.updatetime.show"
            prop="updatetime"
            label="发布时间"
            width="200"
          ></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="slot-row">
                <my-button bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385" @click="editRow(scope.row)"
                  >编辑</my-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="tctk-page">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="limit"
          :page-sizes="[15,25,30]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <el-dialog :visible.sync="showVedioList" width="60%" :show-close="false">
      <div class="header">
        <div class="label">视频列表</div>
        <div class="iconfont icon-close" @click="showVedioList = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="vedio-list">
          <div
            v-for="(item, index) in videoList"
            :key="index"
            class="vedio-list-item"
            @click="playVideo(item)"
          >
            <div class="index">{{ item.index }}</div>
            <div class="title">{{ item.title }}</div>
            <my-button bgc="#0480FF">播放</my-button>
          </div>
        </div>
        <div class="video-play">
          <video :src="videoPlay.src" class="video" controls></video>
        </div>
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="showVedioList = false">关闭</my-button>
      </div>
    </el-dialog>
    <!-- 确认弹窗 -->
    <my-dialog-confirm
      :show.sync="showConfirm"
      @confirm="confirmDelete"
    ></my-dialog-confirm>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myForm from "@/components/myForm.vue";
import myDropdownList from "@/components/myDropdownList.vue";
import myDialogConfirm from "@/components/myDialogConfirm.vue";

export default {
  components: {
    myButton,
    myForm,
    myDropdownList,
    myDialogConfirm,
  },
  data() {
    return {
      showConfirm: false,
      showVedioList: false,
      tableQuery: {
        title: {
          type: "input",
          label: "标题",
          value: "",
          placeholder: "请输入标题",
        },
        status: {
          type: "select",
          label: "状态",
          value: "",
          placeholder: "",
          list: [
            {
              label: "全部",
              value: "",
            },
            {
              label: "待审核",
              value: "0",
            },
            {
              label: "已生效",
              value: "1",
            },
          ],
        },
        username: {
          type: "input",
          label: "用户",
          value: "",
          placeholder: "请输入用户",
        },
      }, // 表格列表搜索条件
      dataSource: [],
      tableHeight: 0,
      currentPage: 1,
      limit: 15,
      total: 300,
      selectedRows: [],
      tableColumn: {
        videotype: {
          show: true,
          text: "类型",
        },
        title_new: {
          show: true,
          text: "标题",
        },
        videonum: {
          show: true,
          text: "视频数",
        },
        status_new: {
          show: true,
          text: "状态",
        },
        authnum: {
          show: true,
          text: "拓客数",
        },
        updatetime: {
          show: true,
          text: "修改时间",
        },
      },
      timer: null,
      videoList: [],
      videoPlay: {},
    };
  },
  mounted() {
    this.tableHeight = document.querySelector(".table").offsetHeight - 2;
    window.onresize = () => {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.tableHeight = document.querySelector(".table").offsetHeight;
      }, 500);
    };
    this.getData();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    async getData() {
      let filter = {};
      for (let key in this.tableQuery) {
        if (this.tableQuery[key].value == "") {
          continue;
        }
        filter[key] = this.tableQuery[key].value;
      }
      let res = await this.$api.tctk_getData({
        page: this.currentPage,
        limit: this.limit,
        filter,
        op: { title: "%*%", status: "=", username: "%*%" },
      });
      console.log(res, "res");
      this.dataSource = res.data;
      this.total = res.count;
    },
    // 点击 添加
    handleClickAdd() {
      window.sessionStorage.removeItem("tmpl");
      this.$router.push({ name: "tctkAdd" });
    },
    // 点击 删除
    handleClickDel() {
      if (!this.selectedRows.length) {
        return this.$message("请先选择");
      }
      this.showConfirm = true;
    },
    handleClickVideonum(row) {
      let videoList = row.video_new.split("|").map((v, i) => {
        return {
          index: i + 1,
          src: v,
          title: row.title_new,
        };
      });
      this.videoList = videoList;
      this.showVedioList = true;
    },
    playVideo(item) {
      this.videoPlay = item;
    },
    // 点击 账号设置
    handleClickSet() {
      this.$router.push({ name: "tctkSetting" });
    },
    // 确认删除
    async confirmDelete() {
      await this.$api.tctk_delete({
        id: this.selectedRows.map((v) => v.id),
      });
      this.showConfirm = false;
      // 重新计算页码
      //  删除以后 剩余数量
      let num = this.total - this.selectedRows.length;
      // 获得删除以后剩余数量 可以 分几页
      let page = Math.ceil(num / this.limit);
      // 如果 当前页 > page
      if (this.currentPage > page) {
        this.currentPage = page;
      }
      this.getData();
    },
    handleClickAuthnum(row) {
      this.$router.push({ path: "/tctk/xs", query: { id: row.id } });
    },
    // 重置
    reset() {
        for (let key in this.tableQuery) {
        this.tableQuery[key].value = "";
        this.getData();
      }
    },
    // 编辑
    editRow(row) {
      // if (row.status_new == "待审核") {
      //   return this.$message("待审核状态下无法编辑");
      // }
      this.$router.push({ path: "/tctk/edit", query: { id: row.id } });
    },
    // 页码跳转
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData();
    },
     handleSizeChange(val) {
        this.pageSize=val;
        this.getData();

    },
    // 刷新数据
    refreshdata() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    // 搜索
    search() {
      this.currentPage = 1;
      this.dataSource = [];
      this.getData();
    },
    selectionChange(selection) {
      this.selectedRows = selection;
    },
    changeConditions(res) {
      this.tableQuery[res.key].value = res.val;
    },
    // 显示 隐藏表格某一列
    changeTableColumn(key) {
      this.tableColumn[key].show = !this.tableColumn[key].show;
    },
    getVideonum(row) {
      if (row.video_new.indexOf("http") == -1) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tctk {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 112px 0 0px 0;
  box-sizing: border-box;
}
.query {
  position: absolute;
  top: 52px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  background-color: #fff;
  .button {
    margin-left: 12px;
    width: 75px;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
  }
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 65px 0 80px 0;
  box-sizing: border-box;
  background-color: #fff;
  .action {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 65px;
    .add-del {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 0 34px;
      box-sizing: border-box;
      /deep/ .button {
        width: 107px;
        height: 40px;
        border-radius: 3px;
        margin-right: 15px;
        font-size: 13px;
        font-weight: bold;
      }
    }
    .list-refresh {
      position: absolute;
      bottom: 12px;
      right: 25px;
      display: flex;
      align-items: center;
      width: 90px;
      .icon {
        font-size: 17px;
        color: rgba(212, 212, 212);
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    padding: 0 34px;
    box-sizing: border-box;
    /deep/ .header-row-class-name {
      height: 65px;
      th {
        background-color: #f0f4ff;
      }
      .cell {
        text-align: center;
        color: #333;
      }
    }
    /deep/ .row-class-name {
      height: 50px;
      .cell {
        display: flex;
        justify-content: center;
        text-align: center;
        .slot-row {
          display: flex;
          align-items: center;
          justify-content: center;
          .icon-block {
            display: flex;
            align-items: center;
            height: 18px;
            padding: 0 8px;
            border-right: 2px solid #c7c7c7;
            .icon {
              color: #333;
              font-size: 20px !important;
            }
            .number {
              color: #333;
              font-size: 16px;
              margin-left: 5px;
            }
          }
          :last-child {
            border-right: 0;
          }
        }
        .button {
          width: 60px;
          height: 24px;
        }
        .tag {
          cursor: pointer;
          &:hover {
            color: #387CF7;
          }
        }
      }
    }
  }
}
.tctk-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  /deep/ .active {
    background-color: #387CF7 !important;
  }
}
// 弹窗
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0;
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      padding: 0px 20px 0px 35px;
      box-sizing: border-box;
      border-bottom: 1px solid #e7e7e7;
      .label {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
      .icon-close {
        color: #999;
        font-size: 20px;
        user-select: none;
        cursor: pointer;
      }
    }
    .body {
      display: flex;
      width: 100%;
      height: 500px;
      padding: 20px 30px 10px 30px;
      box-sizing: border-box;
      .vedio-list {
        width: 40%;
        height: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        overflow: auto;
        .vedio-list-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 40px;
          font-size: 14px;
          .button {
            height: 30px;
            width: 60px;
          }
        }
      }
      .video-play {
        width: 60%;
        height: 100%;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        .video {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80px;
      .button {
        width: 122px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
</style>
